<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>期刊管理</title>
    <!--<script type="text/javascript" src="/libms/lib/js/jquery-3.2.1.min.js"></script>-->
    <!--<script type="text/javascript" src="/libms/lib/js/bootstrap.min.js"></script>-->

    <!--<script src="/libms/lib/layui/layui.js" type="text/javascript"></script>-->
    <!--<link rel="stylesheet" href="/libms/lib/layui/css/layui.css">-->
    <!--<link rel="stylesheet" href="/libms/lib/css/bootstrap.min.css">-->

    <script type="text/javascript" src="app/js/bookman.js"></script>
    <link rel="stylesheet" href="app/css/tablegroup.css">
</head>
<body>
<div class="container">
    <div class="tgroup">
        <div class="form form-inline">
            <input class="form-control" type="text" name="" id="bookname" placeholder="名称">
            <input class="form-control" type="text" name="" id="author" placeholder="作者">
            <input class="form-control" type="text" name="" id="publisher" placeholder="出版社">
            <button class="btn btn-primary">查询</button>
        </div>
    </div>
    <div class="tgroup">
        <button class="btn btn-success" id="addbook" ><span class="glyphicon glyphicon-plus"></span>添加</button>
    </div>


    <table class="layui-table" id="bktb" lay-filter="bktb">

    </table>



</div>
</body>
</html>
<script>
    $(document).ready(function() {
        layui.use('table', function() {
            var table = layui.table;
            table.render({
                elem: '#bktb',
                url:'booklist.json',
                page:true,

                cols: [[
                    {field:'name',  title: '名称'},
                    {field:'author',  title: '作者'},
                    {field:'publisher',  title: '出版社'},
                    {field:'edition',  title: '版次'},
                    {field:'num',  title: '数量', },
                    {fixed: 'right', width:200, align:'center', toolbar: '#barDemo',  title: '操作'}
                ]]


            });
            //监听工具条
            table.on('tool(bktb)', function(obj){
                var data = obj.data;
                if(obj.event === 'detail'){
                    layer.msg('ID：'+ data.id + ' 的查看操作');
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    layer.alert('编辑行：<br>'+ JSON.stringify(data))
                }
            });
        });





    });

</script>
<script type="text/html" id="barDemo">
    <!-- <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a> -->
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>

</script>